<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3中使用step控制动画</title>
	<style>
		div{
			width: 200px;
			height: 200px;
			background: orange;
		}
		/*定义css3动画*/
		@-webkit-keyframes animate{
			from {width: 200px;}
			to   {width: 100px;}
		}
		@-moz-keyframes animate{
			from { width: 200px;}
			to   {width: 100px;}
		}
		@-o-keyframes animate{
			from {width: 200px;}
			to   {width: 100px;}
		}
		@keyframes animate{
			from {width: 200px;}
			to   {width: 100px;}
		}
		/*正常定义动画*/
		#logo{
			-webkit-animation: animate 5s 10;
			   -moz-animation: animate 5s 10;
			     -o-animation: animate 5s 10;
			        animation: animate 5s 10;
		}
		/*使用step来控制动画帧*/
		#logo-step{
			-webkit-animation: animate 5s steps(10) 10;
			   -moz-animation: animate 5s steps(10) 10;
			     -o-animation: animate 5s steps(10) 10;
			        animation: animate 5s steps(10) 10;
		}
	</style>
</head>
<body>
	<div id="logo"></div>
	<div id="logo-step"></div>
</body>
</html>